<template>
	<view class="container">
		<custom :back="true" background="#F5F5F5" title="新书推荐"></custom>

		<view class="head">
			<template>

			</template>
		</view>

		<view class="content">
			<book v-for="(item,index) in list" :key="item.id" :item="item" :index="index" @click="gotoBook(item)">
			</book>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive } from 'vue'
	import { onShow, onReachBottom } from '@dcloudio/uni-app'
	import { useUserStore } from '@/stores/user'
	import { bookMallList } from '@/api/index'
	import { BookItem } from '@/types/index'
	import Tabs from './components/Tabs.vue'
	import { getNovelinfo, chapterrecores } from "@/api/toutiao";
	const txt = ref<string>('')
	const pageInfo = reactive({
		page: 1,
		limit: 10,
		totalPage: 0
	})
	const list = ref<BookItem[]>([])

	let noveltype = 2
	const changeType = (index) => {
		noveltype = 2
		if (noveltype > 1) {
			list.value = []
			getList()
		} else {
			list.value = []
			getList()
		}
	}

	//获取列表
	const getList = async () => {
		try {
			const userStore = useUserStore()
			const res = await bookMallList({
				page: pageInfo.page,
				limit: pageInfo.limit,
				name: txt.value,
				app_id: userStore.loginInfo.app_id,
				novel_type: 2
			})
			list.value = list.value.concat(res.data)
			pageInfo.totalPage = res.total_page;
		} catch (e) {
			//TODO handle the exception
		}
	}


	const searchList = () => {
		pageInfo.page = 1
		pageInfo.totalPage = 0
		list.value = []
		getList()
	}

	//跳转详情
	const gotoBook = async (item) => {
		if (!item) return
		// #ifdef MP-WEIXIN

		uni.navigateTo({
			url: `plugin-private://wx293c4b6097a8a4d0/pages/novel/index?bookId=${item.book_id}&blockUnpaidScroll=1`
		})

		// #endif

		// #ifndef MP-WEIXIN
		uni.navigateTo({
			url: `/pages/details/index?novel_id=${item.id}`
		})
		// #endif
	}

	onShow(() => {
		searchList();
		// #ifdef MP-KUAISHOU
		ks.showShareMenu();
		// #endif
	})

	onReachBottom(() => {
		if (pageInfo.page >= pageInfo.totalPage) return
		pageInfo.page++
		getList()
	})
</script>

<style scoped lang="scss">
	.content {
		padding: 0 30rpx 24rpx;

		&:deep(.item) {
			margin-top: 24rpx;
		}
	}

	.tabs {
		position: relative;
		padding: 16rpx 50rpx;
		background: #fff;
		@include flex($align: center);

		.tab {
			padding: 16rpx 8rpx;
			@include tx(30rpx);
			color: #9A9697;
			font-weight: 500;
			transition: all 0.4s ease-in-out;

			&.active {
				color: #000;
				font-weight: 600;
			}
		}

		.line {
			position: absolute;
			left: 42rpx;
			bottom: 0;
			@include size(64rpx, 12rpx);
			background: #FD6A13;
			transition: all 0.4s ease-in-out;
			border-radius: 12rpx;
			transform: translateX(var(--left));
			z-index: 1;
		}
	}
</style>